<template>
  <div>
    <!-- 添加合同清单详情对话框 -->
    <jy-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
        <el-form-item label="清单名称" prop="sheetName">
          <el-input v-model="queryParams.sheetName" placeholder="请输入清单名称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :span-method="setTableMethodDialog" :data="tableBzqdData" :height="tableHeight" border
        style="width: 100%" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" :selectable="rowSelectable"> </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
        <el-table-column property="sheetName" align="center" label="清单类型名称"> </el-table-column>
        <el-table-column property="specificationName" align="center" label="规格型号名称">
          <template slot-scope="scope">
            <span>{{ scope.row.specificationName ? scope.row.specificationName : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column property="sheetUnit" label="清单单位" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sheetUnit ? scope.row.sheetUnit : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column property="sheetTaxRate" label="税率" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sheetTaxRate ? scope.row.sheetTaxRate + "%" : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column property="sheetTaxRate" label="单价" align="center">
          <template slot-scope="scope">
            <el-input-number size="mini" v-model="scope.row.initDanjia" placeholder="请输入单价"
              :precision="5" :controls="false" style="width: 100%;"
              @change="computeInitZongjia(scope.$index)"></el-input-number>
            <!-- <el-input size="mini" v-model="scope.row.initDanjia" placeholder="请输入单价"
              @change="computeInitZongjia(scope.$index)"></el-input> -->
          </template>
        </el-table-column>
        <el-table-column property="initRongliang" label="数量" align="center">
          <template slot-scope="scope">
            <el-input-number size="mini" v-model="scope.row.initRongliang" placeholder="请输入数量" :precision="3"
                             :controls="false" style="width: 100%;" @change="computeInitZongjia(scope.$index)"></el-input-number>
            <!-- <el-input size="mini" v-model="scope.row.initRongliang" placeholder="请输入数量"
              @change="computeInitZongjia(scope.$index)"></el-input> -->
          </template>
        </el-table-column>
        <el-table-column property="sheetTaxRate" label="价税合计" align="center">
          <template slot-scope="scope">
<!--            {{ scope.row.initZongjia || '-' }}-->
             <el-input size="mini"  v-model="scope.row.initZongjia" placeholder="价税合计"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </jy-dialog>
  </div>
</template>
<script>
import { listDataBzqd, listBaContractSheets, getBaContractSheets, delBaContractSheets, addBaContractSheets, updateBaContractSheets } from "@/api/cm/baContractSheets";
import decimal from "@/utils/big-decimal";

export default {
  name: 'sheet-add',
  props: {
    treeInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    standardIds: {
      type: Array,
      default: () => {
        return [];
      }
    },
  },
  data () {
    return {
      open: false,
      title: '',
      queryParams: {
        sheetName: undefined
      },
      tableBzqdData: [],
      form: {
        bolist: []
      },
      tableHeight: window.innerHeight - 260
    };
  },
  created () {
  },
  mounted () {
  },
  methods: {
    init () {
      this.getListDataBzqd();
      this.open = true;
      this.title = "添加合同清单详情";
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleQuery () {
      this.getListDataBzqd();
    },
    // 标准清单列表
    getListDataBzqd () {
      const params = {
        lowerFlag: 0,
        ...this.queryParams
      };
      listDataBzqd(params).then((res) => {
        console.log(res);
        this.tableBzqdData = res.data || [];
        if (this.tableBzqdData.length) {
          this.setrowspansDialog();
        }
      });
    },
    // 判断是否禁选
    rowSelectable (row, index) {
      return !this.standardIds.includes(row.sheetId);
    },
    // 设置合并行
    setrowspansDialog () {
      const columns = ["sheetName"]; // 需要合并的列名
      // 为每个需要合并的列设置默认 rowspan
      this.tableBzqdData.forEach((row) => {
        columns.forEach((col) => {
          row[col + "Rowspan"] = 1; // 例如：row['name1Rowspan'] = 1
        });
      });

      columns.forEach((col, index) => {
        for (let i = 0; i < this.tableBzqdData.length; i++) {
          // 这里进行判断
          // 如果当前行的列数据和下一行的列数据相等
          // 就把当前rowspan + 1，下一行的rowspan - 1
          for (let j = i + 1; j < this.tableBzqdData.length; j++) {
            if (this.tableBzqdData[i][col] === this.tableBzqdData[j][col]) {
              this.tableBzqdData[i][col + "Rowspan"]++;
              this.tableBzqdData[j][col + "Rowspan"]--;
            } else {
              break; // 如果不相等，跳出循环，因为已经没有相同的了
            }
          }
          // 这里跳过已经重复的数据
          i = i + this.tableBzqdData[i][col + "Rowspan"] - 1;
        }
      });
    },
    setTableMethodDialog ({ row, column, rowIndex, columnIndex }) {
      // 根据列索引决定合并哪一列
      if (columnIndex === 2) {
        // 这里可能需要调整，根据你实际的列数
        return {
          rowspan: row[column.property + "Rowspan"],
          colspan: 1
        };
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
      this.form.bolist = val;
      if (val.length) {
        this.form.bolist.forEach((v) => {
          v.standardId = v.sheetId; //标准清单ID
          v.bdId = this.treeInfo.parentId; //标段ID
          v.zdId = this.treeInfo.id; //站点ID
          // this.form.bolist[i].initRongliang = val[i].initRongliang; //数量
          // this.form.bolist[i].initDanjia = val[i].initDanjia; //单价
          // this.form.bolist[i].initZongjia = val[i].initZongjia; //价税合计
        });
      } else {
        this.form.bolist = [];
      }
      console.log(this.form.bolist);
    },
    // 计算价税合计
    computeInitZongjia (index) {
      let a = Number(this.tableBzqdData[index].initRongliang); //数量
      let b = Number(this.tableBzqdData[index].initDanjia); //单价
      if (a && b) {
        this.tableBzqdData[index].initZongjia = decimal.multiply(a, b);
      }
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    reset () {
      this.form = {
        bolist: []
      };
    },
    /** 提交按钮 */
    submitForm () {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$modal.msgError(`请先选中您要提交的标准清单！`);
        return;
      }
      let JsonData = this.form.bolist;
      JsonData.forEach((v) => {
        v.sheetId = "";
      });
      let data = JSON.stringify(JsonData);

      addBaContractSheets(data)
        .then((response) => {
          this.$modal.msgSuccess("新增成功");
          // this.open = false;
          this.$emit('callback');
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped></style>
